<!-- pages/post/detail.vue -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '帖子详情',
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <view class="page">
    <fg-navbar>帖子详情</fg-navbar>

    <scroll-view class="content" scroll-y>
      <view v-if="!post" class="loading">加载中…</view>
      <view v-else>
        <image v-if="post.cover" :src="post.cover" class="cover" mode="aspectFill" />
        <view class="body">
          <view class="title-row">
            <text class="title">{{ post.title }}</text>
            <text class="badge" :class="post.type === 'secondhand' ? 'b-secondhand' : 'b-parttime'">
              {{ post.type === 'secondhand' ? '二手' : '兼职' }}
            </text>
          </view>
          <view class="meta">
            <text v-if="post.type === 'secondhand' && post.price !== undefined" class="price">¥{{ post.price }}</text>
            <text v-if="post.type === 'parttime' && post.wage" class="wage">{{ post.wage }}</text>
            <text v-if="post.location" class="loc">{{ post.location }}</text>
            <text class="time">{{ formatTime(post.crtim) }}</text>
          </view>
          <view class="content-text">{{ post.content }}</view>
        </view>

        <!-- 评论列表 -->
        <view class="section-title">评论</view>

        <!-- 先判断是否禁用 -->
        <view v-if="!isDisabled" class="empty">评论功能已关闭</view>

        <!-- 未禁用时再处理加载/空态/列表 -->
        <view v-else>
          <view v-if="loadingComments" class="loading">评论加载中…</view>
          <view v-else-if="!comments || comments.length === 0" class="empty">还没有评论</view>
          <view v-else class="comments">
            <view v-for="c in comments" :key="c.id" class="comment">
              <view class="c-header">
                <text class="c-author">{{ c.author }}</text>
                <text class="c-time">{{ formatTime(c.crtim) }}</text>
              </view>
              <view class="c-content">{{ c.content }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部评论输入 -->
    <view class="composer" :style="{ paddingBottom: 'calc(env(safe-area-inset-bottom) + 8px)' }" :class="{ disabled: !isDisabled }">
      <textarea
        v-model="input"
        class="input"
        placeholder="写点什么…"
        auto-height
        :show-confirm-bar="false"
        @confirm="onSubmit"
        confirm-type="send"
        :disabled="!isDisabled"  
      />
      <button class="send" :disabled="submitting || !input.trim()" @click="onSubmit">
        {{ submitting ? '发送中…' : '发送' }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { Post } from '@/mock/api'
import { mockGetPostById } from '@/mock/api'
import { postDetailGet, postDetailPost } from '@/api/allApi'
const post = ref<Post | null>(null)
const comments = ref<any[]>([])
const loadingComments = ref(true)
const submitting = ref(false)
const input = ref('')
const isDisabled = ref(true)

onLoad(async (query) => {
  const id = String(query.id || '')
  if (!id) {
    uni.showToast({ title: '缺少帖子ID', icon: 'none' })
    return
  }
  post.value = await mockGetPostById(id)

  isDisabled.value = post.value["commentActive"]
  if (!post.value) {
    uni.showToast({ title: '帖子不存在', icon: 'none' })
    return
  }
  await loadComments()
})

function formatTime(ts: number) {
  const d = new Date(ts)
  const pad = (n: number) => String(n).padStart(2, '0')
  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
}

function loadComments() {
  loadingComments.value = true
  try {
    if (!post.value) return
    postDetailGet(post.value.id).then((res) => {
      comments.value = [...res.data.items]
    })
  } finally {
    loadingComments.value = false
  }
}

async function onSubmit() {
  const content = input.value.trim()
  if (!content || !post.value || submitting.value) return
  submitting.value = true
  try {
    postDetailPost(post.value.id, content).then((res) => {loadComments()})
    input.value = ''
    uni.showToast({ title: '已发布', icon: 'success' })
  } catch (e) {
    uni.showToast({ title: '发送失败', icon: 'none' })
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped lang="scss">
  .page { display: flex; flex-direction: column; height: 100vh; background: #f7f8fa; }
  .content { flex: 1; }
  .loading, .empty { text-align: center; color: #6b7280; padding: 16px 0; }
  .cover { width: 100%; height: 200px; display: block; }
  .body { background: #fff; padding: 12px; }
  .title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .title { font-size: 18px; font-weight: 700; color: #111827; }
  .badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; }
  .b-secondhand { background: #eef2ff; color: #3730a3; }
  .b-parttime  { background: #ecfeff; color: #155e75; }
  .meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; color: #6b7280; font-size: 12px; }
  .price, .wage { font-weight: 700; color: #111827; }
  .content-text { margin-top: 10px; color: #374151; line-height: 1.6; font-size: 14px; }

  .section-title { padding: 12px; font-size: 14px; color: #6b7280; }
  .comments { padding: 0 12px 12px; }
  .comment { background: #fff; border-radius: 12px; padding: 10px; margin-bottom: 8px; }
  .c-header { display: flex; justify-content: space-between; font-size: 12px; color: #6b7280; }
  .c-author { font-weight: 600; color: #111827; }
  .c-content { margin-top: 6px; font-size: 14px; color: #374151; }

  .composer {
    display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px; background: #fff; border-top: 1px solid #e5e7eb;
  }
  .input {
    flex: 1; min-height: 36px; max-height: 92px; background: #f3f4f6; border: 1px solid #e5e7eb;
    border-radius: 10px; padding: 8px 10px; font-size: 14px;
  }
  .send { padding: 10px 14px; background: #2563eb; color: #fff; border-radius: 10px; }
  .send:disabled { opacity: .6; }
</style>
